【第1322期】Vue CLI 3 配置中 Modern mode 是什么

前言

今日早读文章由汽车之家@冷旭投稿分享。

@冷旭，目前就职于汽车之家，用户产品中心-研发部前端团队。

正文从这开始～

最近特别关注 vue-cli 3 的更新情况，有很多特别棒的新功能和特性，比如基于 UI 界面的项目管理器（参数配置、数据查看、插件安装一体的界面工具）、可配置的输出构建类型（App、库、组件、异步组件）、构建模式 Modern mode 等等。下面我们重点关注下 Modern mode 是什么，如何实现的。

目录

• Modern mode 是什么？

• Modern mode 实现方式

Modern mode 是什么？

使用 Babel 我们能够利用 ES2015 中最新的语言特性，但这也意味着我们必须通过转换和 添加 polyfille 来支持旧浏览器。这些转换后的代码通常比原生 ES2015+ 代码更冗长，并且解析和运行较慢。鉴于当今大多数现代浏览器对原生 ES2015+ 有着不错的支持，而我们不得不将数据量更大和效率底下的代码发送给浏览器，因为我们必须支持那些旧的浏览器。

Vue CLI 提供了一个 Modern mode 来帮助您解决这个问题。用以下命令进行生产时：

vue-cli-service build --modern

Vue CLI 构建两个版本的 js 包：一个面向支持现代浏览器的原生 ES2015+ 包，以及一个针对其他旧浏览器的包。

但最酷的部分是没有特殊的部署要求。生成的HTML文件中自动适配。 这个方式采用了 Phillip Walton 文章中讨论的技术方案：

• 在支持原生 ES2015+ 的浏览器中，js会通过 <script type="module"> 加载，并且可以使用 <link rel="modulepreload"> 预加载。

• 在不支持的浏览器中使用 <script nomodule> 来加载编译版本，并且这会被支持ES模块的浏览器所忽略。

• Safari 10 中有一个小问题这里已经解决，可以自动加载。

对比 Hello World 应用（vue 初始化的 Demo）使用这种模式打包出来的文件，通过现代模式输出的包（以后简称现代包）已经小了16%。在生产中，现代包通常会显著的提升 parse 速度和加载性能。

Modern mode 实现方式

在浏览器环境语法特性检测还没有一个特别好的解决方案，随着一些新的 JavaScript 语法的出现，单凭特性检测来检查新语法的支持程度很是棘手。尽管如此对于 ES2015+ 的基本语法特性检测我们还是有办法的。解决之道便是 <script type="module"> 。

大部分开发者认为 <script type="module"> 是用来加载 ES 模块的，但是这里使用 <script type="module"> 的特性——加载浏览器可以处理的、使用 ES2015+ 语法的 JavaScript 文件。

换句话说，每个支持 <script type="module"> 的浏览器都支持你所熟知的大部分 ES2015+ 语法，例如：

• 支持 <script type="module"> 的浏览器也支持 async 和 await 函数。

• 支持 <script type="module"> 的浏览器也支持 Class 类。

• 支持 <script type="module"> 的浏览器也支持 arrow functions。

• 支持 <script type="module"> 的浏览器也支持 fetch 、Promises、Map、Set 等更多 ES2015+ 语法。

因此，唯一需要做的就是为不支持 <script type="module"> 的浏览器提供一个降级方案。对于支持 <script type="module"> 的浏览器会忽略 <script nomodule></script> 方式引入的脚本，如下代码：

// 支持的浏览器 会加载 app.js， 不支持的浏览器因为 type 值不是 text/javascript 所以脚本并不会被加载。
<script type="module" src="app.js"></script>
// 支持的浏览器 会忽略配置 `nomodule` 属性的脚本加载，不支持的浏览器会正常加载。
<script src="app-legacy.js" nomodule></script>

下面看一下vue打包出来的代码：

// ...
<link as="style" href="/css/app.6166f93b.css" rel="preload">
<link as="script" href="/js/app.4e3e948a.js" rel="modulepreload">
<link as="script" href="/js/chunk-vendors.fcf87964.js" rel="modulepreload">
<link href="/css/app.6166f93b.css" rel="stylesheet">
// ...
<script type="module" src="/js/chunk-vendors.fcf87964.js"></script>
<script type="module" src="/js/app.4e3e948a.js"></script>
<script>!function () { var e = document, t = e.createElement("script"); if (!("noModule" in t) && "onbeforeload" in t) { var n = !1; e.addEventListener("beforeload", function (e) { if (e.target === t) n = !0; else if (!e.target.hasAttribute("nomodule") || !n) return; e.preventDefault() }, !0), t.type = "module", t.src = ".", e.head.appendChild(t), t.remove() } }();</script>
<script src="/js/chunk-vendors-legacy.ea74b83d.js" nomodule></script>
<script src="/js/app-legacy.854b5bc1.js" nomodule></script>

之前说到现代浏览器中都可以通过 <script type="module"> 来实现 ES2015+ 的特性检测针对性的加载脚本，但是 Safari 10 除外，这里的一段脚本是修复 safari 10 上 nomdoule 的表现不同的：

<script>!function () { var e = document, t = e.createElement("script"); if (!("noModule" in t) && "onbeforeload" in t) { var n = !1; e.addEventListener("beforeload", function (e) { if (e.target === t) n = !0; else if (!e.target.hasAttribute("nomodule") || !n) return; e.preventDefault() }, !0), t.type = "module", t.src = ".", e.head.appendChild(t), t.remove() } }();</script>

webpack 相关配置

如果你对 vue-cli 3 是如何实现这块的感兴趣可以查看源码。

为了生成不同环境的js文件，你需要2个 babel-loader targets 配置。

// resolve targets
let targetsif (process.env.VUE_CLI_BABEL_TARGET_NODE) {
 // running tests in Node.js
 targets = { node: 'current' }
} else if (process.env.VUE_CLI_BUILD_TARGET === 'wc' || process.env.VUE_CLI_BUILD_TARGET === 'wc-async') {
 // targeting browsers that at least support ES2015 classes
 // https://github.com/babel/babel/blob/master/packages/babel-preset-env/data/plugins.json#L52-L61
 targets = {
   browsers: [
     'Chrome >= 49',
     'Firefox >= 45',
     'Safari >= 10',
     'Edge >= 13',
     'iOS >= 10',
     'Electron >= 0.36'
   ]
 }
} else if (process.env.VUE_CLI_MODERN_BUILD) {
 // targeting browsers that support <script type="module">
 targets = { esmodules: true }
} else {
 targets = rawTargets
}

ES2015+ 浏览器支持目标只需配置 babel-loader 参数 targets = { esmodules: true } 即可。

link 标签的 preload 属性

preload 作为一个新的web标准，旨在提高性能，为web开发人员提供更细粒度的加载控制。

preload 使开发者能够自定义资源的加载逻辑，且无需忍受基于脚本的资源加载器带来的性能损失。

preload 还有许多其他好处。使用 as 来指定将要预加载的内容的类型，将使得浏览器能够：

• 更精确地优化资源加载优先级。

• 匹配未来的加载需求，在适当的情况下，重复利用同一资源。

• 为资源应用正确的内容安全策略。

• 为资源设置正确的 Accept 请求头。

在 modulepreload 诞生前，还没有一种很好的声明式预加载模块的方法。Chrome 从 64 版本后 开始 “实验性的支持这个特征”。<link rel="modulepreload"> 是 <link rel="preload"> 的特定模块版本，解决了后者的一些问题。

总结：

启用该模式会自动构建两个版本的 js 包，针对支持现代浏览器的原生 ES2015+ 包，和针对其他旧浏览器的包，生成的 HTML 会通过 <script type="module"> 和 <script nomodule> 进行自动降级，不需要任何特殊部署配置。原生 ES2015 包几乎不需要任何 polyfill 和编译，代码尺寸更小，现代浏览器 parse 和运行也更快。

拓展阅读：

• ES6 Modules in Chrome M61+

• ECMAScript modules in browsers

• ES6 Modules in Depth

• Deploying ES2015+ Code in Production
  Today

• Preloading modules

关于本文
作者：@冷旭
原文：https://mp.weixin.qq.com/s/X_kl6AJ0Q_9BJk0_eRSM1w

最后，为你推荐